<template>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { menuStore } from '@/store'
import { useRoute } from 'vue-router'
const menu = menuStore()
const route = useRoute()

// 监听路由变化（菜单状态和路由联动）
watch(() => route.path, (newPath, oldPath) => {
  traversalTree(menu.menuList, newPath)
})

// 根据当前路由获取所属菜单信息
const traversalTree = (arr: any, str: string) => {
  arr.forEach((item: any) => {
    if (item.path == str) {
      if (item.resource !== '1') return // 非系统资源拦截
      if (item.superior == '') { // 一级路由
        menu.headerActive = item.code
        menu.asideActive = ''
        menu.asideList = item.children
      } else { // 多级路由
        menu.headerActive = item.superior.substr(0, 1)
        menu.asideActive = item.code
        getParentMenu(menu.menuList, item.superior)
      }
    }
    if (item.children.length > 0) {
      traversalTree(item.children, str)
    }
  })
}

// 多级路由获取父级菜单信息
const getParentMenu = (arr: any, str: string) => {
  arr.forEach((item: any) => {
    if (item.code == str) {
      menu.asideList = item.children
    }
    if (item.children.length > 0) {
      getParentMenu(item.children, str)
    }
  })
}
</script>

<style>
@import url('@/assets/icon/iconfont.css'); /* 字体图标 */
@import url('@/styles/flex.css'); /* flex 布局 */
@import url('@/styles/normalize.css'); /* 重置样式 */
</style>
